<template>
	<div>
		<!-- 顶部按钮 -->
		<div class="btn_group">
			<div class="header1">
				<div>
					<el-button round @click="Change(Item)" round v-for="Item in list" :key="Item.id" :class="{active:isActive==Item.title}">{{Item.title}}</el-button>
					
				</div>
				<!-- <el-input v-model="search" placeholder="请输入内容" suffix-icon="fa fa-search"></el-input> -->
			</div>
			<!-- 搜索框 -->
			<div class="dataSearch">
				
				<el-select v-model="valuecalss" placeholder="请选择班级" @change="getExamByCourseAndClazz()" style="margin-right: 1.25rem;">
					<el-option v-for="item in optionss" :key="item.id" :label="item.className" :value="item.id">
					</el-option>
				</el-select>
				
				<el-select v-model="examName" placeholder="选择考试场次">
					<el-option v-for="(item,index) in options" :key="index" :label="item.examName" :value="''+item.id" style="margin-left: 0.625rem;">
					</el-option>
				</el-select>

			</div>
		</div>

		<div style="width: 90%;margin: 0 auto;">

			<FaceComparisonRecord v-if="Invigilate==1" :examName="examName"></FaceComparisonRecord>
			<AbnormalBehavior v-if="Invigilate==2" :examName="examName"></AbnormalBehavior>
			<div v-if="Invigilate==3">还待开发</div>
			<PortraitInterception v-if="Invigilate==4" :examName="examName"></PortraitInterception>
		</div>


	</div>
</template>

<script>
	import FaceComparisonRecord from "./InvigilateComent/FaceComparisonRecord.vue"
	import AbnormalBehavior from "./InvigilateComent/AbnormalBehavior.vue"
	import PortraitInterception from "./InvigilateComent/PortraitInterception.vue"
	import {
		HttpManager
	} from "../../../../request/Teacher.js"
	export default {
		components: {
			FaceComparisonRecord: FaceComparisonRecord,
			AbnormalBehavior: AbnormalBehavior,
			PortraitInterception: PortraitInterception
		},
		data() {
			return {
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false,

				},
				Invigilate: 1,
				examName: '',
				options: [],
				isActive: "考前人脸比对记录",
				list: [
				  {
				    title: "考前人脸比对记录",
					id:1
				  },
				  {
				    title: "异常行为记录",
				    id:2
				  },{
					title:"人像截取反馈",
					id:4
				  },
				  {
				    title: "考试监考视频",
				    id:3
				  }
				  
				],
				src:'',
				courseID:window.localStorage.getItem("ClassId"),
				valuecalss:'',
				optionss:[]


			}
		},
		created()
		{
			// this.getExamByCourseId();
			this.getClazzByCourseId();
		},
		methods: {
			Change(item) {
                this.isActive = item.title;
				this.Invigilate =item.id;
			},
			//教师根据课程获取考试
			getExamByCourseId()
			{
				var pamars={
					courseId:this.courseID
				}
				HttpManager.getExamByCourseId(pamars).then(e=>{
					console.log(e);
					this.options=e.data.data;
					
				})
			},
			//获取班级列表
			getClazzByCourseId() {
				var parmas = {
					courseId: this.courseID
				}
				HttpManager.getClazzByCourseId(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.optionss = e.data.data;
					this.valuecalss = this.optionss[0].id;
					this.getExamByCourseAndClazz();
				})

			},
			getExamByCourseAndClazz() {
				var params = {
					courseId:this.courseID,
					clazzId:this.valuecalss,
					examStatus: 3,
					pageNum: 0
				}
				HttpManager.getExamByCourseAndClazz(params).then(e => {
					console.log(e);
					this.options = e.data.data;
					this.examName = ''+this.options[0].id;
					// alert(this.value);
				})
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 60px;
		margin-left: 0.625rem;


		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;
			margin-right: 1.25rem;
			display: flex;

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03d3bd;
				color: #fff;


				&:hover {
					cursor: pointer;
					color: #03d3bd;
				}
			}
		}
	}

	.header1 button {
		height: 40px;
		// width: 100px;
		outline: none;
		border: inherit;
		margin-left: 20px;
		cursor: pointer;
	}

	.header1 .button {
		height: 40px;
		width: 100px;
		outline: none;
		border: inherit;
		background-image: linear-gradient(to right, #03d3bd, #04dac4);
		color: white;
		border-radius: 40px;
		// margin-left: 30px;
		cursor: pointer;
	}

	.header1 button i {
		margin-right: 5px;
		font-weight: bold;
	}

	.header1 .el-input {
		position: absolute;
		right: 0;
		width: 200px;
		border-radius: 30px;
		margin-right: 50px;
	}

	.active {
		background-color: #03D3BD;
		color: white;
	}
</style>
